<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>个人中心</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="http://localhost/campus/">
    <link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="static/css/person.css"/>
    <script src="static/js/jquery.min.js"></script>
    <script src="layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-fluid">
    <jsp:include page="/pages/common/header.jsp"/>

    <%--主体内容--%>
    <div class="layui-row center">
        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
            <div class="center_category">
                <ul class="layui-nav layui-nav-tree layui-inline" lay-shrink="all" style="background: #797979;">
                    <li class="layui-nav-item">
                        <a href="person/update" style="background: #797979;">修改信息</a>
                    </li>
                    <li class="layui-nav-item layui-this">
                        <a href="javascript:;" style="background: #797979;">我的发布</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="person/myFavorite" style="background: #797979;">我的收藏</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="person/myOrder" style="background: #797979;">我的订单</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-col-xs10 layui-col-sm10 layui-col-md10">
            <div class="person_body" style="display: block;">
                <c:if test="${myProducts.size() == 0}">
                    <div style="width: 100%;margin-top: 24px;text-align: center;">
                        <img src="static/img/noData.svg" style="width: 120px;height: 120px;"/>
                        <p style="line-height: 24px;margin-top:20px;color: #2E2D3C;font-size: 20px;">您还没有发布过商品，
                            <a href="product/release" style="color: deepskyblue;">去发布</a></p>
                    </div>
                </c:if>
                <c:forEach var="myProduct" items="${myProducts}">
                    <div style="width: 30%;height: 90%;float: left;margin:8px 18px;background: #f5f5f5">
                        <div class="personRelease_item">
                            <img src="${myProduct.img}" alt=""/>
                            <div class="personRelease_item_div">
                                <p>${myProduct.name}</p>
                                <p style="color:red;">￥${myProduct.price}</p>
                                <p style="color: #1E9FFF">${myProduct.stringReleaseTime}</p>
                            </div>
                            <c:if test="${myProduct.productState == 0}">
                                <div class="personRelease_item_div">
                                    <button class="layui-btn layui-btn-normal layui-btn-sm"
                                            onclick="productEdit('${myProduct.id}')">编辑
                                    </button>
                                    <button class="layui-btn ${myProduct.shelves ? "layui-btn-danger" :"layui-btn-warm"} layui-btn-sm"
                                            onclick="changeProductState('${myProduct.id}')">${myProduct.shelves ? "下架" :"上架"}</button>
                                    <button class="layui-btn layui-btn-sm" style="background: red;"
                                            onclick="productDelete('${myProduct.id}',false)">删除商品
                                    </button>
                                </div>
                            </c:if>
                            <c:if test="${myProduct.productState != 0}">
                                <div class="personRelease_item_div">
                                    <p style="font-size: 16px;color: mediumseagreen;padding:20px;line-height: 20px;text-align: center;">
                                        已卖出</p>
                                    <button class="layui-btn layui-btn-sm" style="background: red;"
                                            onclick="productDelete('${myProduct.id}',true)">删除记录
                                    </button>
                                </div>
                            </c:if>
                        </div>
                        <div class="personRelease_item_introduction">
                                ${myProduct.productDescribe}
                        </div>
                    </div>
                </c:forEach>
                <div style="width: 100%;height: 10%;text-align: center;position: absolute;top:94%;">
                    <div id="product_page"></div>
                </div>
            </div>
        </div>
    </div>


    <%@include file="/pages/common/footer.jsp" %>
</div>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });

    var layer = null;
    layui.use('layer', function () {
        layer = layui.layer;
        let backMessage = '${sessionScope.backMessage}';
        if (backMessage !== '') {
            backMessage = JSON.parse(backMessage);
            let icon = backMessage.success ? 1 : 2;
            layer.msg(backMessage.message, {
                icon: icon
                , time: 2000
            });
            <%
            session.removeAttribute("backMessage");
            %>
        }
    });

    layui.use('laypage', function () {
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'product_page' //注意，这里的 test1 是 ID，不用加 # 号
            , count: ${myProductsNum} //数据总数，从服务端得到
            , curr: ${curPage}
            , limit: 3
            , jump: function (obj, first) {
                //首次不执行
                if (!first) {
                    window.location.href = "http://localhost/campus/person/myRelease?curPage=" + obj.curr
                }
            }
        });
    });

    function changeProductState(productID) {
        $.ajax({
            type: "POST"
            , url: "http://localhost/campus/product/shelves"
            , data: "productId=" + productID
            , success: function () {
                window.location.reload();
            }
        })
    }

    function productDelete(productID, isLogic) {
        let message = isLogic ? "确定删除该商品记录?" : "确定删除该商品?";
        layer.confirm(message, {
                icon: 3
                , title: '警告'
            }
            , function (index) {
                window.location.href = "http://localhost/campus/product/delete?productId=" + productID + "&isLogic=" + isLogic;
                layer.close(index);
            });
    }

    function productEdit(productID) {
        window.location.href = "http://localhost/campus/product/release?productId=" + productID
    }

</script>
</body>
</html>
